<nb-card class="header-card">
  <nb-card-header>
    <h2 class="h4 page-heading">Components Overview</h2>
  </nb-card-header>
</nb-card>

<div class="components-list">
  <ng-container *ngFor="let component of components">
    <h3 *ngIf="component.group" class="group-title h4">{{ component.name }}</h3>
    <div *ngIf="!component.group" class="component-card-wrapper">
      <a class="component-navigate-link" [routerLink]="component.link">
        <nb-card [attr.title]="component.name">
          <nb-card-body>
            <img class="component-icon" src="assets/images/components/{{ component.icon }}"
                 [attr.alt]="component.name">
            <label class="component-name">{{ component.name }}</label>
          </nb-card-body>
        </nb-card>
      </a>
    </div>
  </ng-container>
</div>
